<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
<title>comboxbox - 静态简单</title>
<link href="/kissy/build/css/dpl/base.css" rel="stylesheet"/>
<link href="../assets/default.css" rel="stylesheet"/>
<style>
    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.5em;
    }

    h1, h2 {
        margin: 1em;
    }
</style>
</head>
<body>

<h1>全新产生新节点</h1>
<div style="margin:10px auto; width:800px;text-align: center" id="newNew">
    <h2>
        static : input a or b or c or d or 3
    </h2>
</div>

<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/package.js"></script>
<script>
    KISSY.use("combobox", function (S, ComboBox) {

        /*
         local dataSource
         */

        (function () {
            var data = ["a123456", "b12345", "c3464356", "d23434"];

            var basicComboBox = new ComboBox({
                width:200,
                render:"#newNew",
                dataSource:new ComboBox.LocalDataSource({
                    data:data
                }),
                maxItemCount:5,
                format:function (query, data) {
                    var ret = [];
                    for (var i = 0; i < data.length; i++) {
                        ret[i] = {
                            content:query?(data[i] + "")
                                    .replace(new RegExp(S.escapeRegExp(query), "g"),
                                    i % 2 ? "$&" : "<b>$&</b>"):(data[i] + ""),
                            disabled:(i % 2 ? true : false)
                        };
                    }
                    return ret;
                }
            });

            basicComboBox.render();

            basicComboBox.on("click", function (e) {
                var item = e.target;
                S.log(item.get("value") + "\n" + item.get("content") +
                        "\n" + item.get('textContent'));
            });
        })();
    });
</script>
</body>
</html>